<template>
  <el-form label-width="100px">
    <el-form-item
        label="指定责任人"
        prop="assignee"
        span="24"
    >
      <el-select-v2 v-model="userTaskForm.assignee"
                    filterable
                    :options="userArr"
                    clearable
                    allow-create
                    style="width: 100%"
                    @change="updateElementTask('assignee', $event)"
      >
      </el-select-v2>
    </el-form-item>
    <el-form-item
      label="指定参与用户"
      prop="candidateUsers"
      span="24"
    >
      <el-select-v2 v-model="userTaskForm.candidateUsers"
                    filterable
                    :options="userArr"
                    multiple
                    clearable
                    allow-create
                    style="width: 100%"
                    @change="updateElementTask('candidateUsers', $event)"
                    >
      </el-select-v2>
    </el-form-item>
    <el-form-item
        label="参与用户组"
        prop="candidateGroups"
    >
      <el-input
          type="textarea"
          v-model="userTaskForm.candidateGroups"
          autosize
          clearable
          style="width: 100%"
          @change="updateElementTask('candidateGroups', $event)"
      />
    </el-form-item>
    <el-form-item
      v-if="userTaskForm.candidateStrategy === 60"
      label="流程表达式"
      prop="candidateParam"
    >
      <el-input
        type="textarea"
        v-model="userTaskForm.candidateParam[0]"
        autosize
        clearable
        style="width: 100%"
        @change="updateElementTask"
      />
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import {ref, watch, toRaw, onBeforeUnmount, nextTick} from 'vue';
import {useUserStore} from "@/core/common/StorageUtil";
import {storeToRefs} from "pinia";

defineOptions({ name: 'UserTask' })
const props = defineProps({
  id: String,
  type: String
})

type UserAssigneeProp =
    | 'assignee'
    | 'candidateUsers'
    | 'candidateGroups'
    | 'dueDate'
    | 'followUpDate'
    | 'priority'
const PROP_KEYS: UserAssigneeProp[] = [
  'assignee',
  'candidateUsers',
  'candidateGroups',
  'dueDate',
  'followUpDate',
  'priority'
]
const EmptyUAForm = PROP_KEYS.reduce((a, b) => (a[b] = '') || a, {})
const userTaskForm = ref(EmptyUAForm as Record<UserAssigneeProp, string>)
const bpmnElement = ref()

const user = useUserStore();
const {userArr} = storeToRefs(user);

const bpmnInstances = () => (window as any)?.bpmnInstances

function getExPropValue<T>(element: any, propKey: string): T {
  const exPropKey = `${bpmnInstances().engine}:${propKey}`
  return element && element.get ? element.get(exPropKey) : element ? element[exPropKey] : element
}
const resetTaskForm = () => {
  const businessObject = bpmnElement.value.businessObject
  if (!businessObject) {
    return
  }
  console.log(businessObject);
  for (const key of PROP_KEYS) {
    userTaskForm.value[key] = getExPropValue(businessObject!, key) || ''
  }
}

const updateElementTask = (key: UserAssigneeProp, value: string) => {
  const exPropKey = `${bpmnInstances().engine}:${key}`
  bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
    [exPropKey]: value === '' ? undefined : value
  })
}

watch(
  () => props.id,
  () => {
    bpmnElement.value = bpmnInstances().bpmnElement
    nextTick(() => {
      resetTaskForm()
    })
  },
  { immediate: true }
)

onBeforeUnmount(() => {
  bpmnElement.value = null
})
</script>
